<template>
	<el-card>
		<div class="arrange-panel-header">
			<div class="class-profiles">
				<div class="title">{{heardTitle}}</div>
			</div>
			<el-button class="float-right" @click="back">{{$t('common.btn.back')}}</el-button>
		</div>
		<div style="margin-top: 24px;">
			<div class="edu-opertion-bar">
				<div class="float-left">
					<el-input v-model="queryForm.condition.keyword" :placeholder="$t('professions.searchForAdministrativeClass')"
						style="width:250px" @keyup.enter.native="getOptions()">
						<i class="el-icon-search" slot="suffix" style="margin-top:10px;cursor:pointer" @click="getOptions()"></i>
					</el-input>
				</div>
				<div class="float-right">
					<el-button @click="exportHandle" type="primary">{{$t('message.export')}}</el-button>
					<el-button @click="addHandle" type="primary">{{$t('message.add')}}</el-button>
				</div>
			</div>
			<el-table :data="table" size="mini" stripe tooltip-effect="light">
				<!--  <edu-table-column type="selection" width="30"></edu-table-column> -->
				<edu-table-column type="index" width="80" :label="$t('message.order')" align="center"></edu-table-column>
				<edu-table-column :label="$t('professions.administrativeClassCode')">
					<template slot-scope="scope">{{scope.row.code}}</template>
				</edu-table-column>
				<edu-table-column :label="$t('professions.administrativeClassCn')">
					<template slot-scope="scope">
						<span :title="scope.row.name">{{scope.row.name}}</span>
					</template>
				</edu-table-column>
				<edu-table-column :label="$t('professions.administrativeClassEn')">
					<template slot-scope="scope">
						<span :title="scope.row.nameEn">{{scope.row.nameEn}}</span>
					</template>
				</edu-table-column>
				<edu-table-column :label="$t('label.trainingLevel')">
					<template slot-scope="scope">{{scope.row.trainingLevelI18n}}</template>
				</edu-table-column>
				<edu-table-column :label="$t('label.college')">
					<template slot-scope="scope">{{scope.row.facultyI18n}}</template>
				</edu-table-column>
				<edu-table-column :label="$t('culture.profession.proCodeName')">
					<template slot-scope="scope">
						<span :title="scope.row.professionName">{{scope.row.professionName}}</span>
					</template>
				</edu-table-column>

				<edu-table-column :label="$t('message.operating')">
					<template slot-scope="scope">
						<el-button type="text" @click="editHandle(scope.row.id)" size="mini">{{$t('message.edit')}}</el-button>
						<el-button type="text" @click="deleteHandle(scope.row.id)" size="mini">{{$t('message.delete')}}</el-button>
					</template>
				</edu-table-column>
			</el-table>
			<div class="edu-pagination">
				<div class="float-right">
					<el-pagination
						@size-change="onPageSizeChange_d"
						@current-change="onCurrentPageChange_d"
						:current-page="queryForm.pageNum_"
						:page-sizes="[20,50,100,500,1000]"
						:page-size="queryForm.pageSize_"
						layout="total, sizes, prev, pager, next, jumper"
						:total="queryForm.total_"
						style="float: right;margin:10px 60px 0 0;"
					></el-pagination>
				</div>
			</div>

			<!-- 编辑/新增方向对话框 -->
			<el-dialog :title="title" width="800px" :visible.sync="editPositinDialog" v-drag-dialog
				@close="resetFormValidate_d()" :close-on-click-modal="false" :close-on-press-escape="false">
				<el-form :model="model" ref="modelRef" :rules="directionRules" label-direction="left"
                 label-width="140px" label-suffix="：">
					<el-row>
						<el-col :span="12">
							<el-form-item :label="$t('professions.administrativeClassCode')" prop="code">
								<el-input v-if="isEdit" :disabled="isEdit" v-model="model.code" :placeholder="$t('professions.plsInputAdministrativeClassCode')" style="width:100%"/>
								<div v-else>
									<el-input v-model="model.code" :placeholder="$t('professions.plsInputAdministrativeClassCode')" style="width:70%"/>
                  <el-button type="text" style="width:25%" @click="autoCode">自动获取</el-button>
								</div>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item :label="$t('professions.administrativeClassCn')" prop="name">
								<el-input v-model="model.name" :placeholder="$t('professions.plsInputAdministrativeClassName')" style="width: 100%;"/>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item :label="$t('professions.administrativeClassEn')" prop="nameEn">
								<el-input v-model="model.nameEn" :placeholder="$t('professions.plsInputAdministrativeClassNameEN')" style="width: 100%;" maxlength="32"/>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item :label="$t('culture.profession.proCode')">
								<el-input :disabled="true" v-model="model.professionCode" style="width: 100%;" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item :label="$t('culture.profession.proCodeName')">
								<el-input :disabled="true" v-model="model.professionName" style="width: 100%;" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item :label="$t('culture.profession.proCodeNameEn')">
								<el-input :disabled="true" v-model="model.professionNameEn" style="width: 100%;" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item :label="$t('message.remark')">
								<el-input v-model="model.remark" type="textarea" :rows="3" style="width:100%" maxlength="255"/>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<span slot="footer">
					<el-button @click="editPositinDialog = false">{{$t('message.cancel')}}</el-button>
					<el-button type="primary" @click="confirmHandle">{{ $t('message.confirm') }}</el-button>
				</span>
			</el-dialog>
		</div>
	</el-card>
</template>

<script>

import {
  addInfo,
  findDetail,
  editInfo,
  deleteInfo,
  queryList,
  exportList,
  getCode
} from "common/src/api/resource/administrativeClass";
import UTILS from "common/src/utils/utils";

export default {
	name: "AdministrativeClassComponent",
	props: {},
	data() {
		let validateCode = (rule, value, callback) => {
			let regex = /^[A-Za-z0-9\(\)\s\S]{0,32}$/;
			if (regex.test(value)) {
				callback();
			} else {
				callback(new Error(this.$t("professions.numberMaxLimited")));
			}
		};
    	let validateName = (rule, value, callback) => {
			let regex = /^[\u4E00-\u9FA50-9\(\)\s\S]{2,30}$/;
			if (regex.test(value)) {
				callback();
			} else {
				callback(new Error(this.$t("professions.wordLimited")));
			}
		};
		return {
			table:null,
      		queryForm: {
				pageNum_: 1,
				pageSize_: 20,
				condition:{
					grade: "",
					professionCode: "",
					keyword: ""
				},
				total_: 0
			},
      		model: {
        		id:null,
				grade: "",
				code: "",
				name: "",
				nameEn: "",
				remark: "",
				professionCode: "",
				professionName: "",
				professionNameEn: "",
				faculty: "",
				trainingLevel: "",
				facultyI18n: "",
				trainingLevelI18n: ""
			},
      		title: "",
			isEdit: false,
			editPositinDialog: false,
			directionRules: {
				code: [
					{
						required: true,
						message: this.$t("professions.administrativeClassCodeReq"),
						trigger: "blur"
					},
					{
						validator: validateCode,
						trigger:"blur"
					}
				],
				name: [
					{
						required: true,
						message: this.$t("professions.administrativeClassNameReq"),
						trigger: "blur"
					},
					{
						validator: validateName,
						trigger:"blur"
					}
				],
				nameEn: [
					{
						required:false,
						message: this.$t("professions.plsInputAdministrativeClassNameEN"),
						trigger:"change"
					}
				]
			}
		};
	},
	methods: {
		exportHandle() {
			exportList(this.queryForm.condition);
		},
		onPageSizeChange_d(size) {
			this.queryForm.pageSize_ = size;
			this.getOptions();
		},
		onCurrentPageChange_d(currentPage) {
			this.queryForm.pageNum_ = currentPage;
			this.getOptions();
		},
		getOptions(data) {
			if (data) {
				this.queryForm.condition.keyword="";
				this.queryForm.condition.grade = data.grade;
				this.queryForm.condition.professionCode = data.professionCode;
				this.heardTitle = data.professionName;
				this.model.grade = data.grade;
				this.model.professionCode = data.professionCode;
				this.model.professionName = data.professionName;
				this.model.professionNameEn = data.professionNameEn;
			}
			queryList(this.queryForm).then(res => {
				if (res.code == 200) {
					this.table = res.data.list;
					this.queryForm.pageNum_ = res.data.pageNum_;
					this.queryForm.pageSize_ = res.data.pageSize_;
					this.queryForm.total_ = res.data.total_;
				}
			});
		},
		confirmHandle() {
			this.$refs.modelRef.validate(valid => {
				if (!valid) {
					return;
				}
				let param = UTILS.clone(this.model);
				if (this.isEdit) {
					editInfo(param).then(res => {
						if (res.code == 200) {
							this.$message({type: "success", message: this.$t("message.editSuccess")});
							this.editPositinDialog = false;
							this.getOptions();
						}
					});
				} else {
					addInfo(param).then(res => {
						if (res.code == 200) {
							this.$message({type: "success", message: this.$t("message.addSuccess")});
							this.editPositinDialog = false;
							this.getOptions();
						}
					});
				}
			});
		},
		addHandle() {
			this.isEdit = false;
			this.resetHandle();
			this.title = this.$t("professions.addAdministrativeClass") + "(" + this.heardTitle + ")";
			this.editPositinDialog = true;
		},
		resetFormValidate_d() {
			this.$refs.modelRef.resetFields();
		},
		editHandle(data) {
			this.isEdit = true;
			this.title = this.$t("professions.editAdministrativeClass") + "(" + this.heardTitle + ")";
			findDetail(data).then(res => {
				if (res.code == 200) {
					this.model = res.data;
				}
			});
			this.editPositinDialog = true;
		},
		resetHandle() {
			this.model.id = "";
			this.model.code = "";
			this.model.name = "";
			this.model.nameEn = "";
			this.model.remark = "";
		},
		deleteHandle(data) {
			this.$delConfirm().then(() => {
				deleteInfo([data]).then(res => {
					if (res.code == 200) {
						this.$message({
							type: "success",
							message: this.$t("message.deleteSuccess")
						});
						this.getOptions();
					}
				});
			});			
		},
		back() {
			this.$emit("back", "main");
		},
		autoCode(){
			getCode(3,this.model.professionCode,null).then(res=>{
				if(res.code==200){
					this.model.code=res.data;
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.arrange-panel-header {
	height: 56px;
	border-bottom: 2px solid #dcdfe6;
	cursor: default;
	.title {
		font-size: 20px;
		color: #000;
		font-weight: bold;
	}
	.class-profiles {
		float: left;
		width: 40%;
		div {
			padding: 5px 0;
		}
	}
}
</style>

